<template>
  <div class="app2-main">
    <!-- tab被切换时实时更新数据 -->
    <el-tabs type="border-card" class="root" v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="收藏列表" name="list">
        <list v-if="tabRefresh.list" />
      </el-tab-pane>
      <el-tab-pane label="类别管理" name="type">
        <type v-if="tabRefresh.type" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import type from './Type'
import list from './List'
export default {
  components: {
    type,
    list
  },
  data () {
    return {
      activeName: 'list',
      tabRefresh: {
        list: true,
        type: false
      }
    }
  },
  methods: {
    handleTabClick (tab) {
      this.activeName = tab.name
      switch (this.activeName) {
        case 'list':
          this.switchTab('list')
          break
        case 'type':
          this.switchTab('type')
          break
      }
    },
    switchTab (tab) {
      for (let key in this.tabRefresh) {
        if (key === tab) {
          this.tabRefresh[key] = true
        } else {
          this.tabRefresh[key] = false
        }
      }
    },
  }
}
</script>

<style lang="scss">
</style>